<template>
  <div class="approval-container">
    <h1>审批详情</h1>
    <div class="approval-header">
      <div class="approval-info">
        <p><strong>标题:</strong> {{ approveDetail.title }}</p>
        <p><strong>描述:</strong> {{ approveDetail.description }}</p>
        <p><strong>申请人:</strong> {{ approveDetail.approveUserId }}</p>
        <p><strong>申请状态:</strong> <span :class="getStatusClass(approveDetail.status)">{{ getStatusText(approveDetail.status) }}</span></p>
        <p><strong>当前等待审批人:</strong> {{ approveDetail.awaitApprover }}</p>
      </div>
    </div>
    <div id="approval-steps">
      <div v-for="(step, index) in steps" :key="index" :class="['approval-step', getStatusClass(step.status), { 'active': step.active }]">
        <div class="step-details" :class="getStatusClass(step.status)">
          <p>{{ step.approveStepTitle }}</p>
        </div>
        <div class="user-status">
          <p>{{ step.approveUser }}</p>
          <div class="status-text">
            <p :class="getStatusClass(step.status)">{{ getStatusText(step.status) }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import requestUtil from '../../network/request'

export default {
  name: 'ApprovalChain',
  data() {
    return {
      eventSource: null,
      steps: [],
      approveDetail: {
        title: '',
        description: '',
        approveUserId: '',
        awaitApprover: '',
      },
    };
  },
  mounted() {
    this.fetchApproveDetail();
    this.subscribeToEvents();
  },
  beforeDestroy() {
    if (this.eventSource) {
      this.eventSource.close();
    }
  },
  methods: {
    fetchApproveDetail() {
      const approveId = this.$route.query.id;
      requestUtil.post('/approve/detail', {
        approveId: approveId
      }).then(res => {
        if (res.code === '0') {
          this.approveDetail = res.result;
          this.generateSteps();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    generateSteps() {
      const { maxLevel, approveChains } = this.approveDetail;
      this.steps = Array.from({ length: maxLevel }, (_, index) => {
        const chain = approveChains.find(chain => chain.approvalLevel === index + 1);
        return {
          approveStepTitle: chain ? chain.approveStepTitle : '',
          approvalLevel: index + 1,
          approveUser: chain ? chain.approveUser : '',
          status: chain ? chain.status : '',
          active: chain ? chain.status === '3' : false, // 假设状态为3表示激活
        };
      });
    },
    subscribeToEvents() {
      const approveId = this.$route.query.id;
      const url = `http://localhost:1702/gooluke-admin/approve/subscribe/${approveId}`;

      this.eventSource = new EventSource(url);

      this.eventSource.onmessage = (event) => {
        const data = JSON.parse(event.data);
        console.log("Received event:", data);
        this.approveDetail = data.result;
        this.generateSteps();
      };

      this.eventSource.onerror = (error) => {
        console.error("EventSource failed:", error);
        this.eventSource.close();
      };
    },
    getStatusClass(status) {
      switch (status) {
        case '1':
          return 'status-approved';
        case '2':
          return 'status-rejected';
        case '3':
          return 'status-pending';
        default:
          return 'status-pending';
      }
    },
    getStatusText(status) {
      switch (status) {
        case '1':
          return '通过';
        case '2':
          return '拒绝';
        case '3':
          return '申请中';
        default:
          return '未知状态';
      }
    },
  },
};
</script>

<style scoped>
.approval-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
  color: #333;
}

.approval-header {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.approval-info p {
  margin: 5px 0;
  font-size: 16px;
}

.approval-info p strong {
  color: #555;
}

#approval-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.approval-step {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  transition: background-color 0.3s;
  font-size: 14px;
  width: 100%;
}

.approval-step .step-details {
  width: 300px; /* 限制宽度为300px */
  height: 50px;
  padding: 8px;
  border-radius: 4px;
  margin-right: 10px;
  background-color: #fff;
  color: #000;
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-direction: column; /* 垂直排列内容 */
  text-align: center; /* 文字居中 */
}

.approval-step .step-details p {
  margin: 0;
  line-height: 1.4;
}

.approval-step .step-details p:first-child {
  font-weight: bold;
}

.approval-step .user-status {
  width: 200px;
  text-align: right;
  font-weight: bold;
}

.approval-step .user-status p{
  color: #000;
}

.approval-step .user-status p {
  margin: 0;
  line-height: 1.4;
}

/*审批步骤背景色*/
.status-approved .step-details {
  background-color: #28a745;
  color: #000;
}

.status-rejected .step-details {
  background-color: #dc3545;
  color: #000;
}

.status-pending .step-details {
  background-color: #fff;
  color: #000;
}

/*审批状态字体颜色*/
.status-approved .status-text p {
  color: #28a745;
}

.status-rejected .status-text p {
  color: #dc3545;
}

.status-pending .status-text p {
  color: #000;
}

/*申请状态字体颜色*/
.status-approved {
  color: #28a745;
}

.status-rejected {
  color: #dc3545;
}

.status-pending {
  color: #ffc107;
}
</style>
